<!--
	搜索页面，大A更新，2023-8-7
-->
<template>
	<view>
		<view class="block-search">
			<view class="option" @click="clickTypeButton">
				<text class="_text">{{searchTypeText}}</text>
				<text class="iconfont icon-arrow-down-bold"></text>
			</view>
			<view class="input">
				<input
					v-model="content"
					type="text"
					maxlength="-1"
					class="_input"
					placeholder="你想搜啥？"
					placeholder-class="placeholder-class">
			</view>
			<view class="button" @click="clickSearchButton">搜索</view>
		</view>
		<template v-if="searchState">
			<!-- 搜索帖子 -->
			<template v-if="type == 'post'">
				<template v-if="postListState == 'success'">
					<view
						@click="$_To('post/post?pid='+item.pid)"
						class="for-post"
						v-for="item in postList">
						<view class="_title" v-if="item.title">{{item.title}}</view>
						<view class="_content" :style="item.title?'':'color: #303133;'">{{$_filterHtml(item.content)}}</view>
					</view>
					<view class="more" @click="clickPostListPage">点击加载更多</view>
				</template>
				<template v-if="postListState == 'loading'">
					<public-loading></public-loading>
				</template>
				<template v-if="postListState == 'empty'">
					<public-empty></public-empty>
				</template>
			</template>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:"post",//搜索类型
				content:"",//搜索内容
				searchState:false,//搜索状态
				searchTypeText:"帖子",
				postList:[],//帖子列表
				postListState:"loading",
				postListPage:2,
			}
		},
		onLoad() {
			
		},
		methods: {
			// 选择搜索类型
			clickTypeButton(){
				uni.showActionSheet({
					itemList: ['帖子'],
					success: (res) => {
						if(res.tapIndex == 0){
							this.type = 'post';
							this.searchTypeText = '帖子';
						}
					}
				});
			},
			// 点击搜索按钮
			clickSearchButton(){
				if(this.content){
					if(this.type == 'post'){
						uni.showLoading()
						this.getPostList();
					}
				}else{
					uni.showToast({
						title:'搜索内容不得为空',
						icon:"none",
						duration:1000
					});
				}
			},
			getPostList(){
				uni.request({
					url:this.$_Config() + `extend/searchPost.php?keyword=${this.content}`,
					method:"GET",
					success: (res) => {
						// 搜索状态
						this.searchState = true;
						uni.hideLoading();
						if(res.data.code == 0){
							this.postList = res.data.results;
							this.postListState = "success";
						}
						if(res.data.code == 10){
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
						if(res.data.code == 1){
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
							this.postListState = "empty"
						}
					}
				})
			},
			clickPostListPage(){
				uni.showLoading({ title: "加载中" })
				uni.request({
					url:this.$_Config() + `extend/searchPost.php?keyword=${this.content}&page=${this.postListPage}`,
					method:"GET",
					success: (res) => {
						if(res.data.code == 0){
							this.postList = this.postList.concat(res.data.results);
							this.postListPage++
							uni.hideLoading();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.block-search{
	display: flex;
	align-items: center;
	margin: 25rpx;
	box-shadow: 0 0 1rpx $ZhanWeiSe;
	border-radius: 10rpx;
	overflow: hidden;
	background: $BeiJingSe;
	.option{
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 28rpx;
		flex-shrink: 0;
		padding: 0 25rpx;
		text{
			font-size: 28rpx;
		}
	}
	.input{
		flex: 1;
		._input{
			display: block;
			font-size: 28rpx;
			background: #FFF;
			padding: 0;
			margin: 0;
			height: 80rpx;
			text-align: center;
		}
		.placeholder-class{
			text-align: center;
			color: $ZhanWeiSe;
			font-size: 28rpx;
		}
	}
	.button{
		flex-shrink: 0;
		font-size: 28rpx;
		line-height: 28rpx;
		background: $LanSe;
		color: #FFF;
		width: 120rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.for-post{
	border-bottom: 1rpx solid $BianKuangSe;
	padding: 25rpx;
	._title{
		font-weight: bold;
	}
	._content{
		display: -webkit-box;
		/*!autoprefixer:off*/
		-webkit-box-orient: vertical;
		/*autoprefixer:on*/
		-webkit-line-clamp: 3;
		overflow: hidden;
		color: $ZhanWeiSe;
	}
}
.more{
	font-size: 28rpx;
	line-height: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: $ZhanWeiSe;
	padding: 25rpx 0;
}
</style>
